<template>
  <div>
        <input type="text" v-model="sousuo" @input="search">
        <div v-show="flag">
            <ul>
                <li v-for="item in keyWord" :key="item.id" v-html="laght(item.name)"></li>
            </ul>
        </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            sousuo:'',
            flag:false,
            list:[{
                id:1,
                name:'天安门',
            },{
                id:2,
                name:'天安门广场'
            },{
                id:3,
                name:'天安门鼓楼'
            }],
            keyWord:[]
        }
    },
    methods: {
        search() {
            this.keyWord = this.list.filter((item) => {
                if(item.name.indexOf(this.sousuo) !== -1){
                    return item
                }
            })
            this.flag = true
        },
        laght(value){
            if(value.indexOf(this.sousuo) !== -1){
                return value.replace(this.sousuo,'<span style="color:#bfa">' + this.sousuo + '</span>')
            }
        }
    },
}
</script>

<style>

</style>